<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="lib/bootstrap.min.css">
    <script src="lib/common.js"></script>
    <style>
        #wrap{
            width: 90%;
            margin: 0 auto;
        }
        #template{
            display: none;
        }
        #mask{
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background-color: rgba(0, 0,0, .5);
            display: none;
        }
        #box{
            width:590px;
            padding: 20px 50px;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            background-color: #fff;
            display: none;
        }
        #relogin{
            float: right;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <h2>学生信息管理系统</h2>
        <h4 style="height:30px;">
            <span id="user"></span>
            <span id="type"></span>:您好，欢迎登录学生信息管理系统
            <button id="relogin" class="btn btn-primary">退出登录</button>
        </h4>
        <hr>
        <button class="btn btn-primary" id="addstudent" style="float: right;">+新增学生</button>
        <table class="table">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>所在城市</th>
                    <th>入学时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="tbody">
                <tr id="template">
                    <td class="data-id"></td>
                    <td class="data-name"></td>
                    <td class="data-age"></td>
                    <td class="data-sex"></td>
                    <td class="data-city"></td>
                    <td class="data-joindate"></td>
                    <td>
                        <button class="btn btn-primary data-edit">编辑</button>
                        <button class="btn btn-danger data-delete">删除</button>
                    </td>
                </tr>

            </tbody>
        </table>
    </div>
    <div id="mask">
        <!--  -->
        <div id="box">
                <h3 id="title"></h3>
                <div class="form-horizontal">
                    <div class="form-group">
                        <label for="data-name" class="col-sm-2 control-label">学生姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="data-name" placeholder="请输入学生姓名">
                        </div>
                    </div>
            
                    <div class="form-group">
                        <label for="data-age" class="col-sm-2 control-label">年龄</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control" id="data-age" placeholder="请输入年龄">
                        </div>
                    </div>
            
                    <div class="form-group">
                        <label for="data-sex" class="col-sm-2 control-label">性别</label>
                        <label class="radio-inline">
                            <input type="radio" name="sex" id="boy" checked>男
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="sex" id="data-female">女
                        </label>
                    </div>
            
                    <div class="form-group">
                        <label class="col-sm-2 control-label">所在城市</label>
                        <select name="" id="province"></select>
                        <select name="" id="city"></select>
                        <select name="" id="area"></select>
                    </div>
                    
                    
                    <div class="form-group">
                        <label class="col-sm-2 control-label">入学日期</label>
                        <div class="col-sm-10">
                            <input type="input" class="form-control" id="data-joindate" placeholder="入学日期" onclick="WdatePicker();">
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <button id="change" class="btn btn-primary" >确认修改</button>
                        <button id="submit" class="btn btn-primary">确认添加</button>
                        <button id="cancel" class="btn btn-default">取消</button>
                    </div>
                </div>
            </div>
        
	
    </div>


    <script src="lib/jquery.min.js"></script>
    <script src="lib/citys.js"></script>
    <script src="lib/datepicker/wdatepicker.js"></script>
    
    <script>
        // 做登录验证 如果每有登录就不能访问这个页面，
        let message = sessionStorage.getItem("message") || document.cookie.replace("message=","");
        if(!message){
            location.href = `${address}/login.html`
        }
        
        console.log(JSON.parse(message))
        $("#user").html(JSON.parse(message)[0].name);
        $("#type").html(JSON.parse(message)[0].type ? "同学" : "老师");
      
        // 退出登录
        $("#relogin").click(function(){
            // 清空存储
            sessionStorage.removeItem("message")
            document.cookie="message=\;expires="+new Date("1999-10-9")
            location.href=(`${address}/login.html`)
        })

        let tem=$("#template");

        // 获取信息请求
         $.ajax({
             url:`${address}/getstudentlist`,
             success(data){
                //  正解析
                 let studentlist=data;
                 let tbody=$("#tbody");
                 studentlist.forEach(item => {
                     let newitem=tem.clone(true);
                         newitem.attr("id","");
                    newitem.find(".data-id").html(item.id)
                    newitem.find(".data-name").html(item.name)
                    newitem.find(".data-age").html(item.age)
                    newitem.find(".data-sex").html(item.sex ? "男" : "女")
                    newitem.find(".data-city").html(item.city)
                    newitem.find(".data-joindate").html(item.joindate)
                    newitem.appendTo(tbody)
                     
                 }); 

             }
         })
        //  删除强求
        //  找到删除按钮 此时的this 指向删除按钮
        tem.find(".data-delete").click(function(){
            // 找到this删除按钮的祖宗tr
            let nowitem=$(this).closest("tr")
            // console.log(nowitem)
                if(confirm(`真的要删除${nowitem.find(".data-name").html()}同学吗？此操作不可逆！`)){

                    $.ajax({
                        url:`${address}/deletestudent`,
                        data:{
                            id:$(this).closest("tr").find(".data-id").html()
                        },
                        success(data){
                            if(data ==="success"){
                                // 如果返回成功 让删除按钮所在的tr淡出
                                nowitem.fadeOut();
                            }
                            else{
                                alert("删除失败")
                            }
                        }
                    })
                }
            })
      
            // 弹出层

            $("#addstudent").click(function(){
                // alert(1)
                $("#mask").fadeIn("")
                $("#box").fadeIn("")
                $("#title").html("添加学生")
                $("#data-name").val("")
                $("#data-age").val("")
                $("#data-joindate").val("")
                $("#submit").css("display","inline-block")
                $("#change").css("display","none")
            })
            $("#data-joindate").click(function(){
                // alert(1)
                WdatePicker();
            })
            $("#cancel").click(function(){
			$("#mask").fadeOut("fast");
			$("#box").fadeOut("fast");
        })
        
        // 添加学生

        $("#submit").click(function(){
            // alert(1)
            // 先判断输入是否为空
			if($("#data-name").val() && $("#data-age").val() && $("#data-joindate")){
            
				$.ajax({
					url:`${address}/addstudent`,
					data:{
						name:$("#data-name").val(),
                        age:$("#data-age").val(),
                        // .checked调用只能用node节点
						sex:$("#data-female")[0].checked ? 0 : 1,
						city:$("#province").val() + $("#city").val() + $("#area").val(),
						joindate:$("#data-joindate").val(),
					},
					success(data){
						if(data === "success"){
							history.go(0)
						}
						else{
							alert("操作失败")
						}
					}
				})
			}
        })
        
         //编辑请求
         tem.find(".data-edit").click(function(){
            //  alert(1)
            let newItem = $(this).closest("tr");
            $("#mask").fadeIn("")
            $("#box").fadeIn("");
            $("#title").html("修改学生信息")
            $("#data-name").val(newItem.find(".data-name").html())
            $("#data-age").val(newItem.find(".data-age").html())
            if(newItem.find(".data-sex").html() === "女"){
                $("#data-female").prop("checked",true)
            }
            if(newItem.find(".data-sex").html() === "男"){
                $("#boy").prop("checked",true)
            }

            $("#data-joindate").val(newItem.find(".data-joindate").html())
            $("#change").css("display","inline-block")
            $("#submit").css("display","none")
            $("#change").click(function(){
                $.ajax({
            	url:`${address}/changemessage`,
            	data:{
                    id:newItem.find(".data-id").html(),
            		name:$("#data-name").val(),
                    age:$("#data-age").val(),
                    sex:$("#data-female")[0].checked ? 0 : 1,
                    city:$("#province").val() + $("#city").val() + $("#area").val(),
                    joindate:$("#data-joindate").val(),
            	},
            	success(data){
            		if(data === "success"){
                        alert("修改成功");
                        history.go(0)
            		}
            		else{
            			alert("修改失败");
            		}
            	}
                })
            })
        })

                
            
            
    </script>
</body>
</html>